component.invoice

invoice

Invoice

Logo
Note:
This page is optimized for print. Try print the invoice and check out the preview. For example, this note will not be visible.

#12345678 / 20 Jan 2014

Company information

Apple Inc.

1 Infinite Loop
Cupertino, CA 95014
408.996.1010
e-mail: company@mybiz.com
phone: (012) 345-678-901
fax: (012) 678-132-901

Client information

John Doe

Business manager at Business
e-mail: john.doe@mybiz.com
phone: (012) 345-678-901
fax: (012) 678-132-901

Note:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc.

No. Qty Price VAT TAX incl.
1
Product name goes here
Size: 3-4 Years Color: Blue Navy
1 $1,000.00 $119.00 $1,119.00
2
Product name goes here
Size: 3-4 Years Color: Blue Navy
1 $1,000.00 $119.00 $1,119.00
3
Product name goes here
Size: 3-4 Years Color: Blue Navy
1 $1,000.00 $119.00 $1,119.00
4
Product name goes here
Size: 3-4 Years Color: Blue Navy
1 $1,000.00 $119.00 $1,119.00

Note:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc.

Subtotal: $1,000.00
Delivery: $5.00
VAT: $119.00
Total: $1,195.95
<div id="pdfTarget">
	<div class="innerAll shop-client-products cart invoice">
	
		<h3 class="separator bottom">Invoice</h3>
		<table class="table table-invoice">
			<tbody>
				<tr>
					<td style="width: 58%;">
						<div class="media">
							<img class="media-object pull-left thumb" src="http://1.s3.envato.com/files/50438174/tf-avatar.jpg" alt="Logo" />
							<div class="media-body hidden-print">
								<div class="alert alert-primary">
									<strong>Note:</strong><br/>
									This page is optimized for print. Try print the invoice and check out the preview.
									For example, this note will not be visible.
								</div>
								<div class="separator bottom"></div>
							</div>
						</div>
					</td>
					<td class="right">
						<div class="innerL">
							<h4 class="separator bottom">#12345678 / 20 Jan 2014</h4>
							<button type="button" data-toggle="print" class="btn btn-default hidden-print"><i class="fa fa-fw fa-print"></i> Print invoice</button>
							<button type="button" data-toggle="button-loading pdf" data-target="#pdfTarget" class="btn btn-primary hidden-print"><i class="fa fa-fw fa-download"></i> Save as PDF</button>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		
		<div class="box-generic">
			<table class="table table-invoice">
				<tbody>
					<tr>
						<td style="width: 50%;">
							<p class="lead">Company information</p>
							<h2>Apple Inc.</h2>
							<address class="margin-none">
								<strong>1 Infinite Loop</strong><br/>
								Cupertino, CA 95014<br/>
								408.996.1010<br/>
								<abbr title="Work email">e-mail:</abbr> <a href="mailto:#">company@mybiz.com</a><br /> 
								<abbr title="Work Phone">phone:</abbr> (012) 345-678-901<br/>
								<abbr title="Work Fax">fax:</abbr> (012) 678-132-901
							</address>
						</td>
						<td class="right">
							<p class="lead">Client information</p>
							<h2>John Doe</h2>
							<address class="margin-none">
								<strong>Business manager</strong> at 
								<strong><a href="#">Business</a></strong><br> 
								<abbr title="Work email">e-mail:</abbr> <a href="mailto:#">john.doe@mybiz.com</a><br /> 
								<abbr title="Work Phone">phone:</abbr> (012) 345-678-901<br/>
								<abbr title="Work Fax">fax:</abbr> (012) 678-132-901
								<div class="separator line"></div>
								<p class="margin-none"><strong>Note:</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc.</p>
							</address>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div class="box-generic padding-none">
			<table class="table table-vertical-center bg-white margin-none">
				<thead class="bg-primary">
					<tr>
						<th style="width: 1%;" class="center">No.</th>
						<th></th>
						<th style="width: 50px;">Qty</th>
						<th style="width: 80px;">Price</th>
						<th style="width: 80px;">VAT</th>
						<th style="width: 80px;">TAX incl.</th>
					</tr>
				</thead>
				<tbody>
				
										<!-- Cart item -->
					<tr>
						<td class="center">1</td>
						<td>
							<h5>Product name goes here</h5>
							Size: <span class="label label-default">3-4 Years</span>
							Color: <span class="label label-default">Blue Navy</span>
						</td>
						<td class="center">1</td>
						<td class="center">&dollar;1,000.00</td>
						<td class="center">&dollar;119.00</td>
						<td class="center">&dollar;1,119.00</td>
					</tr>
					<!-- // Cart item END -->
										<!-- Cart item -->
					<tr>
						<td class="center">2</td>
						<td>
							<h5>Product name goes here</h5>
							Size: <span class="label label-default">3-4 Years</span>
							Color: <span class="label label-default">Blue Navy</span>
						</td>
						<td class="center">1</td>
						<td class="center">&dollar;1,000.00</td>
						<td class="center">&dollar;119.00</td>
						<td class="center">&dollar;1,119.00</td>
					</tr>
					<!-- // Cart item END -->
										<!-- Cart item -->
					<tr>
						<td class="center">3</td>
						<td>
							<h5>Product name goes here</h5>
							Size: <span class="label label-default">3-4 Years</span>
							Color: <span class="label label-default">Blue Navy</span>
						</td>
						<td class="center">1</td>
						<td class="center">&dollar;1,000.00</td>
						<td class="center">&dollar;119.00</td>
						<td class="center">&dollar;1,119.00</td>
					</tr>
					<!-- // Cart item END -->
										<!-- Cart item -->
					<tr>
						<td class="center">4</td>
						<td>
							<h5>Product name goes here</h5>
							Size: <span class="label label-default">3-4 Years</span>
							Color: <span class="label label-default">Blue Navy</span>
						</td>
						<td class="center">1</td>
						<td class="center">&dollar;1,000.00</td>
						<td class="center">&dollar;119.00</td>
						<td class="center">&dollar;1,119.00</td>
					</tr>
					<!-- // Cart item END -->
										
				</tbody>
			</table>
		</div>
		
		<!-- Row -->
		<div class="row">
		
			<!-- Column -->
			<div class="col-md-5 hidden-print">
				<div class="box-generic">
					<p class="margin-none"><strong>Note:</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc.</p>
				</div>
			</div>
			<!-- Column END -->
			
			<!-- Column -->
			<div class="col-md-4 col-md-offset-3">
				<div class="box-generic padding-none">
					<table class="table cart_total margin-none">
						<tbody>
							<tr>
								<td class="right border-top-none">Subtotal:</td>
								<td class="right border-top-none strong">&dollar;1,000.00</td>
							</tr>
							<tr>
								<td class="right">Delivery:</td>
								<td class="right strong">&dollar;5.00</td>
							</tr>
							<tr>
								<td class="right">VAT:</td>
								<td class="right strong">&dollar;119.00</td>
							</tr>
							<tr>
								<td class="right">Total:</td>
								<td class="right strong">&dollar;1,195.95</td>
							</tr>
							<tr class="hidden-print">
								<td colspan="2">
									<div class="innerAll text-center">
										<button type="submit" class="btn btn-primary"><i class="fa fa-fw fa-arrow-right"></i> Proceed to Payment</button>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- // Column END -->
			
		</div>
		<!-- // Row END -->
		
	</div>
</div>

Code

@import "assets/components/modules/admin/tables/classic/assets/less/tables.less";
@import "http://localhost/shared/components/modules/admin/invoice/assets/less/invoice.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "http://localhost/shared/components/modules/admin/ui/alerts/assets/alerts.less";
@import "assets/components/core/less/labels.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.